CSS Icons


« Previous Next »

Icons can easily be added to your HTML page, by using an icon library.

How To Add Icons

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.

All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)


Example

    
            <!DOCTYPE html>
            <html lang="en">
            <head>
              <title>CSS HOME</title>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
              <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
              <link rel="stylesheet" href="CSS.css">
            </head>
            <body>
              <!-- Rest of your HTML content remains the same -->
            
              <h1>Font Awesome icon library</h1>
            
              <p>Some Font Awesome icons:</p>
              <i class="fas fa-cloud"></i>
              <i class="fas fa-heart"></i>
              <i class="fas fa-car"></i>
              <i class="fas fa-file"></i>
              <i class="fas fa-bars"></i>
            
              <p>Styled Font Awesome icons (size and color):</p>
              <i class="fas fa-cloud" style="font-size:24px;"></i>
              <i class="fas fa-cloud" style="font-size:36px;"></i>
              <i class="fas fa-cloud" style="font-size:48px;color:green;"></i>
              <i class="fas fa-cloud" style="font-size:60px;color:yellow;"></i>
            
            
            </body>
            </html>
Result:
Example Image